<template>
  <div class="award-detail">
    <!--<div class="calendar-box">-->
    <!--<div class="logo"><img src="./calendar.png" class="calendar"></div>-->
    <!--<div class="con">-->
    <!--<div class="triangle-logo"><img src="./triangle1.png" class="triangle"/></div>-->
    <!--<datetime format="YYYY-MM" v-model="month" :end-date="date" :show.sync="showCalendar" class="date-box"-->
    <!--@on-confirm="onConfirm"></datetime>-->
    <!--<div class="triangle-logo"><img src="./triangle2.png" class="triangle"/></div>-->
    <!--</div>-->
    <!--</div>-->

    <div class="date-box">
      <div class="date-con">
        <img src="./left.png" class="pic1" @click="preMonth"/>
        <datetime format="YYYY-MM" v-model="month" :show.sync="showCalendar" class="date-time" :end-date="date"
                  @on-confirm="onConfirm"></datetime>
        <img src="./right.png" class="pic2" @click="nextMonth"/>
      </div>
    </div>


    <!--入职奖励列表-->
    <div class="detail-box" v-if="award == 1">
      <div class="title-box">
        <span>姓名</span><span>类别</span><span>奖励金额</span><span>状态</span>
      </div>

      <div class="list-wrap" ref="wrapper">
        <div class="list-con">
          <div class="list-box" v-for="(item,index) in relationList" :key="index">
            <span>{{item.userName}}</span>
            <span>{{item.type == 0?"直接邀请":"间接邀请"}}</span>
            <span>{{item.relationMoney}}元</span>
            <span>{{item.delStatus == 0?"未到账":"已到账"}}</span>
          </div>
        </div>
      </div>

      <div class="btn-box">
        <div class="title1">已到账{{arriveTotal}}元</div>
        <div class="title2">未到账奖励{{noneTotal}}元</div>
      </div>
    </div>

    <div class="empty-wrap" v-if="award == 2">
      <div class="empty-box">
        <div class="img-box"><img src="../../images/empty.png" class="empty"/></div>
        <div class="tip">没有相关数据~</div>
      </div>
    </div>
  </div>
</template>

<script>
  import {getYearMonth, getDeviceRatio, formatDate, getPreMonth, getNextMonth} from "../../common/js/util";
  import {baseUrl} from "../../common/js/env";
  import {Datetime} from 'vux';
  import BScroll from 'better-scroll';

  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   */
  /*上拉配置*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  }

  export default {
    data() {
      return {
        award: 0,
        showCalendar: false,
        month: getYearMonth(),
        currentPage: 1,
        PageSize: 20,
        noMoreData: false,
        userSign: "",
        arriveTotal: "",
        noneTotal: "",
        relationList: [],
        awardScroll: null,
        date: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("user_sign"));
      this.date = formatDate(new Date(), "yyyy-MM-dd");
      this.queryList();
    },
    methods: {
      preMonth() {//获取上一个月
        this.month = getPreMonth(this.month);
        this.queryList();
      },
      nextMonth() {//获取下一月
        if (this.month == getYearMonth()) {
          return;
        }
        this.month = getNextMonth(this.month);
        this.queryList();
      },
      queryList() {
        this.$vux.loading.show({
          text: '加载中',
        });
        //查询邀请入职奖励列表
        this.axios.get(baseUrl + "/invite/get_on_work?sgin=" + this.userSign + "&page=" + this.currentPage + "&size=" + this.PageSize + "&time=" + this.month).then((res) => {
          let prizeObj = res.data;
          this.$vux.loading.hide();
          if (prizeObj.code == 0 && prizeObj.data != null) {
            this.arriveTotal = prizeObj.data.totalMoney;//已到账奖励金
            this.noneTotal = prizeObj.data.remainderMoney;//未到账奖励金
            let list = prizeObj.data.relationList;
            if (list != null && list.length > 0) {
              this.award = 1;
              this.relationList = list;
              //DOM还未更新
              this.$nextTick(() => {
                this.initScroll();
                this.awardScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.awardScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {
              this.awardScroll = null;
              this.award = 2;
            }
          } else {
            this.$vux.toast.text(prizeObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });
          setTimeout(() => {
            this.axios.get(baseUrl + "/invite/get_on_work?sgin=" + this.userSign + "&page=" + (++this.currentPage) + "&size=" + this.PageSize + "&time=" + this.month).then((res) => {
              let prizeObj = res.data;
              if (prizeObj.code == 0) {
                if (prizeObj.data.relationList != null && prizeObj.data.relationList.length > 0) {
                  this.relationList = this.relationList.concat(prizeObj.data.relationList);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(prizeObj.msg, "middle");
              }
            })
          }, 500);
        }
      },
      initScroll() {//初始化BScroll
        if (!this.awardScroll) {
          this.awardScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.awardScroll.refresh();
        }
      },
      enable() {
        this.awardScroll && this.awardScroll.enable()
      },
      refresh() {
        this.awardScroll && this.awardScroll.refresh()
      },
      finishPullUp() {
        this.awardScroll && this.awardScroll.finishPullUp()
      },
      onConfirm(value) {//按月份查找
        this.month = value;
        this.currentPage = 1;
        this.PageSize = 20;
        this.queryList();
      },
    },
    watch: {
      relationList() {
        this.$nextTick(() => {
          this.awardScroll.refresh();
        })
      }
    },
    components: {
      Datetime,
      BScroll
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../common/stylus/mixin.styl"

  .award-detail
    wh(100%, 100%)
    overflow: hidden
    .date-box
      fj(center, center)
      wh(100%, 1.2rem)
      background: rgba(60, 175, 255, 1)
      .date-con
        fj(center, center)
        .pic1
          wh(0.4rem, 0.4rem)
        .date-time
          padding-right: 0.32rem
          padding-left: 0.32rem
          size-color(0.427rem, rgba(255, 255, 255, 1))
        .date-time >>> .vux-cell-value
          size-color(0.507rem, rgba(255, 255, 255, 1))
        .pic2
          wh(0.4rem, 0.4rem)
    .detail-box
      margin: 0 auto
      wh(100%, auto)
      overflow: hidden
      .title-box
        display: flex
        text-align: center
        size-color(0.387rem, rgba(27, 27, 27, 1))
        font-weight: bold
        span
          flex: 1
      .list-wrap
        position: fixed
        top: 2.4rem
        bottom: 1.333rem
        width: 100%
        overflow: hidden
        z-index: 88
        .list-box
          display: flex
          text-align: center
          margin-bottom: 0.627rem
          size-color(0.413rem, rgba(68, 68, 68, 1))
          span
            flex: 1
    .btn-box
      display: flex
      position: fixed
      bottom: 0
      wh(100%, 1.333rem)
      .title1
        fj(center, center)
        flex: 1
        size-color(0.44rem, rgba(255, 255, 255, 1))
        background: rgba(60, 175, 255, 1)
      .title2
        fj(center, center)
        flex: 1
        size-color(0.44rem, rgba(102, 102, 102, 1))
        background: rgba(242, 242, 242, 1)
    .empty-wrap
      display: flex
      align-items: center
      justify-content: center
      width: 100%
      height: auto
      position: fixed
      top: 1.2rem
      left: 0
      right: 0
      bottom: 0
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)

</style>
